<script setup>
import { reactive, onMounted } from "vue";
import { getShouC, getUpdataChusheng, getCity } from "@/http/api.js";
import { areaList } from "@vant/area-data"; // 城市
// console.log(areaList);
const data = reactive({
  img: "",
  phone: "",
  mobile: "",
  xinxi: {}, // 信息
  show: false, // 年龄弹框
  show1: false, // 年龄弹框
  show2: false, // 年级弹框
  // flag: 0,
  currentDate: "2003-06-16",
  areaList: {}, //
  id: 0,
  obj: {
    id: localStorage.getItem("id"),
    province_id: "",
    city_id: "",
    area_id: "",
  },
  title: "",
  Nianclass: [], // 年级数据
  grade: [],
  name: "",
  obj1: {}, //年级更新要穿的值
});

onMounted(() => {
  getXinxi(); // 调用信息
  Chusheng(); // 调用出生日期
  // data.flag = 1;
});
const name = localStorage.getItem("name");
// const img = localStorage.getItem("avatar");
// const phone = localStorage.getItem("user_nickname"); // 虚拟手机号
// const mobile = localStorage.getItem("mobile"); // 手机号
// data.img = img;
// data.phone = phone;
// data.mobile = mobile;
const times = (val) => {
  return new Date(val).toLocaleDateString();
};
const getXinxi = async () => {
  const id = localStorage.getItem("id");
  const res = await getShouC(id);
  data.xinxi = res; // 信息赋值
  for (var i in res.grade.list) {
    data.Nianclass.push(res.grade.list[i]);
    data.grade.push({ name: res.grade.list[i], id: i });
  }
  data.currentDate = res.birthday;
  data.title = `${res.province_name}-${res.city_name}-${res.area_name}`;
  data.name = res.grade_name;
  console.log(data.name);
};

// 出生日期
const Chusheng = async (val) => {
  const id = localStorage.getItem("id");
  const res = await getUpdataChusheng({
    id,
    birthday: data.currentDate,
  });
  // console.log(res);
};
const chusheng = () => {
  data.show = true;
};
// 更新出生日期
const Ok = (e) => {
  let result = times(+new Date(e));
  data.currentDate = result.split("/").join("-");
  Chusheng();
  data.show = false;
  getXinxi();
};

// 拿到城市信息
const getCityList = async () => {
  await getCity({
    parent_id: 0,
  });
  // res.city_list.forEach((item, index) => {
  //   // data.areaList.push(item[index]);
  // });
};

// 点击城市
const Addcity = () => {
  // getCityList();
  data.areaList = areaList;
  data.show1 = true;
};
// 点击城市确定按钮
const cityOk = async (e) => {
  data.show1 = false;
  let res = await getUpdataChusheng(data.obj);

  getXinxi();
};
const chufa = async (e) => {
  console.log(e);
  // let res = await getUpdataChusheng({
  data.obj = {
    id: localStorage.getItem("id"),
    province_id: e[0].code,
    city_id: e[1].code,
    area_id: e[2].code,
  };
  data.title = `${e[0].name}/${e[1].name}/${e[2].name}`;
  // });
  // console.log(res);
  // area_id: "110106";
  // city_id: "110100";
  // id: "434148";
  // province_id: "110000";
  // data.id = e[0].code;
  // getCityList({ rent_id: data.id });
  //  console.log(data.id);
};

// 点击年级
const Nclass = () => {
  data.show2 = true;
};
// 点击弹框确认
const OKclass = (e) => {
  // data.name = e;
  let id = 0;
  data.grade.some((item) => {
    if (e == item.name) {
      return (id = item.id);
    }
  });
  getUpdataChusheng({
    grade_id: Number(id),
    id: localStorage.getItem("id"),
  });
  data.show2 = false;
  getXinxi();
};
const onChange = (e) => {
  data.name = e;
};
</script>
<template>
  <div class="ren">
    <header>
      <van-icon name="arrow-left" @click="$router.push('/my')" />
      <h3>个人信息</h3>
    </header>
    <div class="box">
      <div class="box1">
        <p>头像</p>
        <div class="div1">
          <img :src="data.xinxi.avatar" alt="" />
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1" @click="$router.push('/info')">
        <p>昵称</p>
        <div class="div1">
          <span>{{
            data.xinxi.user_nickname == "" ? "请选择" : data.xinxi.user_nickname
          }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1">
        <p>手机号码</p>
        <div class="div1">
          <span class="sp">{{ data.xinxi.tel }}</span>
        </div>
      </div>
      <div class="box1" @click="$router.push('/sex')">
        <p>性别</p>
        <div class="div1">
          <span>{{ data.xinxi.sex == 0 ? "男" : "女" }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1" @click="chusheng">
        <p>出生日期</p>
        <div class="div1">
          <!-- <span>请选择</span> -->
          <span>{{ data.xinxi.birthday }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 出生日期弹框 -->
      <van-popup
        v-model:show="data.show"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-datetime-picker
          type="date"
          title="选择年月日"
          @cancel="data.show = false"
          @confirm="Ok"
          v-model="data.currentDate"
        />
      </van-popup>

      <div class="box1" @click="Addcity">
        <p>地区</p>
        <div class="div1">
          <span>{{ data.title == "" ? "请选择" : data.title }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 城市选择 -->
      <van-popup
        v-model:show="data.show1"
        position="bottom"
        bind:close="onClose"
      >
        <van-area
          :area-list="data.areaList"
          @confirm="cityOk"
          @cancel="data.show1 = false"
          @change="chufa"
        />
      </van-popup>
      <div class="box1" @click="Nclass">
        <p>年级</p>
        <div class="div1">
          <span>{{ data.name == "" ? "请选择" : data.name }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 年级弹框 -->
      <van-popup v-model:show="data.show2" position="bottom">
        <van-picker
          :columns="data.Nianclass"
          @confirm="OKclass"
          @cancel="data.show2 = false"
          @change="onChange"
        />
      </van-popup>
      <div class="box1">
        <p>报考院校</p>
        <div class="div1">
          <span>罗定职业技术学院</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1" @click="$router.push('/baokao')">
        <p>报考转移</p>
        <div class="div1">
          <span>{{
            data.xinxi.major == "" ? "请选择" : data.xinxi.major
          }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ren {
  overflow: hidden;
  header {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 36px;
    }
  }
  .box {
    padding: 0 20px;
    .box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      border-bottom: 0.5px solid #eaeaea;
      margin-bottom: 20px;

      p {
        font-size: 32px;
      }
      .div1 {
        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          vertical-align: middle;
          padding-bottom: 30px;
        }
        .van-icon {
          padding-top: 20px;
        }
        span {
          font-size: 32px;
          color: #666;
        }
        .sp {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
